<template>
  <div class="tripartite">
    <el-form :model="searchData" class="searchForm">
      <el-form-item>
        <el-input class="seech1" v-model="searchData.parkInfo" placeholder="停车场名称/车场编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input class="seech1" v-model="searchData.yardManageId" placeholder="所属厂商编号"></el-input>
      </el-form-item>
      <el-form-item class="seech0">
        <el-select class="seech2" v-model="searchData.isShow" placeholder="线上展示状态">
          <el-option label="正常展示" value="1"></el-option>
          <el-option label="关闭展示" value="0"></el-option>
          <el-option label="线上展示状态" value="null"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 80px;">
        <el-button type="primary" @click="getTableData()">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据列表展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="parkCode" label="车场编号" align="center">
      </el-table-column>
      <el-table-column prop="parkName" label="停车场名称" align="center">
      </el-table-column>
      <el-table-column prop="parkAddress" label="停车场地址" align="center">
      </el-table-column>
      <el-table-column prop="mobilePhone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="totalSpace" label="总车位" align="center">
      </el-table-column>
      <el-table-column prop="yardManageId" label="所属厂商编号" align="center">
      </el-table-column>
      <el-table-column prop="chargingStandard" label="收费规则" align="center">
      </el-table-column>
      <el-table-column label="线上展示状态" align="center">
        <template slot-scope="scope">
        	<!-- <p class="btn" @click="viewDetails(scope.$index, scope.row)" v-permission='"d02182beb77642c1afb70c5fdc81d06c"'>查看详情</p><p class="btn" @click="downBtn(scope.$index,scope.row)" v-permission='"df950e24cedc47f797a90824d82e3198"'>下载二维码</p> -->
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :hide-on-single-page="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.current" :page-sizes="[10, 15, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" style="margin-top:30px;">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'tripartite',
    data() {
      return {
        tableData: [],
        searchData: {
          current: 1,
          size: 10,
          isShow: ''
        },
        total:null,
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: '/park/park-manage/getOtherParkByManage',
          data: this.searchData
        }).then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },
      //分页修改每页显示条数
      handleSizeChange(val){
        this.searchData.size = val;
        this.getTableData();
      },
      //分页跳转页面
      handleCurrentChange(val){
        this.searchData.current = val;
        this.getTableData();
      },
    }
  }
</script>

<style scoped>
  .searchForm .el-form-item {
  	width: 220px;
  	display: inline-block;
  }
  .searchForm .seech0 {
    width: 160px;
  }
  .seech1 {
  	width:200px;
  }
  .seech2 {
    width: 140px;
  }

</style>
